<!--
 * @Author: cest cestrmail@163.com
 * @Date: 2022-12-12 08:36:49
 * @LastEditors: cest cestrmail@163.com
 * @LastEditTime: 2022-12-12 15:57:52
 * @FilePath: /ithome-lite/src/components/NewsItem.vue
 * @Description: NewsItem -- 新闻列表项
-->
<template>
  <div class="news-item" @click="turn"><img class="news-img" :src="news.image" mode="aspectFill">
    <div class="news-text">
      <div class="news-title">{{ news.title }}</div>
      <div class="news-info"><span>{{ news.postdate }}</span><span v-if="news.commentcount">{{ news.commentcount
      }}评</span></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
interface Props {
  news: ComponentModels.NewsItem
}
const props = defineProps<Props>();
const turn = () => {
  const { link } = props.news
  uni.navigateTo({ url: link })
}
</script>

<style lang="scss" scoped>
.news-item {
  display: flex;
  height: 90px;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.news-img {
  width: 100px;
  height: 75px;
  margin-right: 10px;
}

.news-text {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.news-title {
  font-size: 15px;
}

.news-info {
  color: #aaa;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
</style>
